<!doctype html>
<html ng-app="myApp">
<head>
  <link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
  <style>
    input.ng-invalid {
      border: 1px solid red;
    }

    input.ng-valid {
      border: 1px solid green;
    }
  </style>
</head>
<body>

  <form name="signup_form" ng-controller="FormController" ng-submit="submitForm()" novalidate>
    <div ng-repeat="field in fields" ng-form="signup_form_input">
      <input type="text"
             name="dynamic_input"
             ng-required="field.isRequired"
             ng-model="field.name"
             placeholder="{{field.placeholder}}" />
      <div ng-show="signup_form_input.dynamic_input.$dirty && signup_form_input.dynamic_input.$invalid">
        <span class="error" ng-show="signup_form_input.dynamic_input.$error.required">The field is required.</span>
      </div>
    </div>
    <button type="submit" ng-disabled="signup_form.$invalid">Submit All</button>
  </form>


  <script>
    angular.module('myApp', [])
    .controller('FormController', function($scope) {
      $scope.fields = [
        {placeholder: 'Username', isRequired: true},
        {placeholder: 'Password', isRequired: true},
        {placeholder: 'Email (optional)', isRequired: false}
      ];

      $scope.submitForm = function() {
        alert("it works!");
      };
    });
  </script>

</body>
</html>